<html>
<head>
	<title>H!Indonesia - Flight, Hotel and Tourism Directory</title>
	<script type="text/javascript" src="script/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.tabify.js"></script>
    <script type="text/javascript" src="script/plugins/jquery.tipsy.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.collapse.js"></script>
    <script type="text/javascript" src="script/jquery-ui.js"></script>
    <script type="text/javascript" src="script/common.js"></script>
	<link rel="stylesheet" type="text/css" href="css/960.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/tipsy.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
	<script type="text/javascript">
        (function( $ ) {
            $.widget( "custom.combobox", {
                _create: function() {
                    this.wrapper = $( "<span>" )
                    .addClass( "custom-combobox" )
                    .insertAfter( this.element );
                    this.element.hide();
                    this._createAutocomplete();
                    this._createShowAllButton();
                },
                _createAutocomplete: function() {
                    var selected = this.element.children( ":selected" ),
                    value = selected.val() ? selected.text() : "";

                    this.input = $( "<input>" )
                        .appendTo( this.wrapper )
                        .val( value )
                        .attr( "title", "" )
                        .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
                        .autocomplete({
                            delay: 0,
                            minLength: 0,
                            source: $.proxy( this, "_source" )
                        })
                        .tooltip({
                            tooltipClass: "ui-state-highlight"
                        });

                    this._on( this.input, {
                        autocompleteselect: function( event, ui ) {
                        ui.item.option.selected = true;
                        this._trigger( "select", event, {
                        item: ui.item.option
                        });
                    },

                    autocompletechange: "_removeIfInvalid"
                    });
                },
                _createShowAllButton: function() {
                    var input = this.input,
                    wasOpen = false;
                    $( "<a>" )
                        .attr( "tabIndex", -1 )
                        //.attr( "title", "Show All Items" )
                        //.tooltip()
                        .appendTo( this.wrapper )
                        .button({
                            icons: {
                                primary: "ui-icon-triangle-1-s"
                            },
                            text: false
                        })
                        .removeClass( "ui-corner-all" )
                        .addClass( "custom-combobox-toggle ui-corner-right" )
                        .mousedown(function() {
                            wasOpen = input.autocomplete( "widget" ).is( ":visible" );
                        })
                        .click(function() {
                            input.focus();
                            // Close if already visible
                            if ( wasOpen ) {
                                return;
                            }
                            // Pass empty string as value to search for, displaying all results
                            input.autocomplete( "search", "" );
                        });
                },
                _source: function( request, response ) {
                    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                    response( this.element.children( "option" ).map(function() {
                    var text = $( this ).text();
                        if ( this.value && ( !request.term || matcher.test(text) ) )
                            return {
                                label: text,
                                value: text,
                                option: this
                            };
                    }) );
                },
                _removeIfInvalid: function( event, ui ) {
                    // Selected an item, nothing to do
                    if ( ui.item ) {
                        return;
                    }
                    // Search for a match (case-insensitive)
                    var value = this.input.val(),
                    valueLowerCase = value.toLowerCase(),
                    valid = false;
                    this.element.children( "option" ).each(function() {
                        if ( $( this ).text().toLowerCase() === valueLowerCase ) {
                            this.selected = valid = true;
                            return false;
                        }
                    });
                    // Found a match, nothing to do
                    if ( valid ) {
                        return;
                    }
                    // Remove invalid value
                    this.input
                        .val( "" )
                        // .attr( "title", value + " didn't match any item" )
                        // .tooltip( "open" );
                        this.element.val( "" );
                        this._delay(function() {
                            this.input.tooltip( "close" ).attr( "title", "" );
                        }, 2500 );
                        this.input.data( "ui-autocomplete" ).term = "";
                },
                _destroy: function() {
                    this.wrapper.remove();
                    this.element.show();
                }
            });
        })( jQuery );

		$(function(){
			$('#tab-book').tabify();

            $("ul.tabs-menu li").click(function () {
                $('.tabs-content').fadeIn(500);
            });

            //hide return and set one way checked
            var $radios = $('input:radio[name="flight-tip"]');
            if($radios.is(':checked') === false) {
                $radios.filter('[value=one-way]').prop('checked', true);
                $('#cont-return').hide();
            }

            $('input:radio[name="flight-tip"]').click(function() {
                $value = $(this).val();
                if ( $value == "round-trip" ) {
                    $('#cont-return').fadeIn(250)();
                } else {
                    $('#cont-return').fadeOut(250);
                }
            });

            $( "#depart" ).datepicker({
                setDate: +0,
                numberOfMonths: 3,
                minDate: 0,
                onClose: function( selectedDate ) {
                    $( "#return" ).datepicker( "option", "minDate", selectedDate );
                }
            });
            $("#depart").datepicker("setDate", "+0");

            $( "#return" ).datepicker({
                setDate: +1,
                numberOfMonths: 3,
                minDate: 0,
                onClose: function( selectedDate ) {
                    $( "#depart" ).datepicker( "option", "maxDate", selectedDate );
                }
            });
            $("#return").datepicker("setDate", "+1");

            $( "#check-in" ).datepicker({
                setDate: +0,
                numberOfMonths: 2,
                minDate: 0,
                onClose: function( selectedDate ) {
                    $( "#check-out" ).datepicker( "option", "minDate", selectedDate );
                }
            });
            $("#check-in").datepicker("setDate", "+0");

            $( "#check-out" ).datepicker({
                setDate: +1,
                numberOfMonths: 2,
                minDate: 0,
                onClose: function( selectedDate ) {
                    $( "#check-in" ).datepicker( "option", "maxDate", selectedDate );
                }
            });
            $("#check-out").datepicker("setDate", "+1");

            $("#select-origin, #select-destination").combobox();

			// $("#demo").collapse();
		});
	</script>
</head>
<body>
	<div class="container_24">
		<header>
			<div class="header-wrapper clearfix">
				<div id="top-bar" class="grid_24">
					<div class="login-box">
						<span class="sign-up-left">
							<a href="#">Sign Up</a>
						</span>
						<span class="separate-or">
						or
						</span>
						<span class="sign-in-right">
							<a href="#">Log In</a>
						</span>
					</div>
					<div class="search-box">
						<button class="search-trigger"></button>
						<input type="text" id="search-keyword" placeholder="search">
					</div>
				</div>
				<div id="site-logo" class="grid_7">
					<a href="#">
						<img src="img/assets/logo.png" alt="H!Indonesia | Online Tourism Information and Booking Ticket"> 
					</a>
				</div>
				<nav id="top-nav" class="grid_17">
					<ul id="menu">
						<li><a href="#">home</a></li>
						<li class="drop"><a href="#">book</a>
							<ul>
								<li><a href="#">flight</a></li>
								<li><a href="#">hotel</a></li>
							</ul>
						</li>
						<li><a href="#">plan</a></li>
						<li><a href="#">explore</a></li>
						<li><a href="#">news</a></li>
						<li><a href="#">travel notes</a></li>
						<li><a href="#">travel guide</a></li>
						<li><a href="#">faq</a></li>
						<li><a href="#">about us</a></li>
					</ul>
				</nav>
			</div>
		</header>
		<section class="main-content grid_18">
			<div class="home-content">
				<ul id="tab-book" class="tabs-menu clearfix">
	                <li class="active flight">
	                	<a href="#flight"><h2>Flight</h2></a>
	                </li>
	                <li class="hotel">
	                	<a href="#hotel"><h2>Hotel</h2></a>
	                </li>
	            </ul>
                <div class="wrap-home-content">
    	            <div id="flight" class="tabs-content clearfix">
            			<div class="search-flight">
            				<h3>Find Flights</h3>
                            <form autocomplete="off">
                				<hr>
                				<ul>
                					<li>
                						<input type="radio" name="flight-tip" id="one-way" value="one-way"><label for="one-way">One Way</label>
                					</li>
                					<li>
                						<input type="radio" name="flight-tip" id="round-trip" value="round-trip"><label for="round-trip">Round Trip</label>
                					</li>
                				</ul>
                				<div class="cols">
                					<label for="from">From</label>
                					<select id="select-origin" class="large">
                						<option value="CGK">Jakarta - CGK</option>
                						<option value="BPN">BalikPapan - BPN</option>
                						<option value="BTJ">Banda Aceh - BTJ</option>
                						<option value="BDO">Bandung - BDO</option>
                					</select>
                				</div>
                				<div class="cols">
                					<label for="to">To</label>
                					<select id="select-destination" class="large">
                						<option value="DPS">Denpasar - DPS</option>
                						<option value="BPN">BalikPapan - BPN</option>
                						<option value="BTJ">Banda Aceh - BTJ</option>
                						<option value="BDO">Bandung - BDO</option>
                					</select>
                				</div>
                				<div class="cols">
                					<label for="depart">Departing</label><br>
                					<input type="text" id="depart" name="depart" class="datepicker">
                				</div>
                				<div id="cont-return" class="cols">
                					<label for="return">Returning</label><br>
                					<input type="text" id="return" name="return" class="datepicker">
                				</div>
                				<div class="cols">
                					<div class="passenger">
                						<label for="adult">Adult</label>
                						<select name="adult" id="adult">
                			            	<option selected="selected" value="1">1</option>
                	                    	<option value="2">2</option>
                	                    	<option value="3">3</option>
                	                    	<option value="4">4</option>
                	        			</select>
                	        		</div>
                	        		<div class="passenger">
                						<label for="child">Child <sub>(2-12 yrs)</sub></label>
                						<select name="child" id="child">
                	       	            	<option selected="selected" value="0">0</option>
                	                    	<option value="1">1</option>
                	                    	<option value="2">2</option>
                	                    	<option value="3">3</option>
                	                    	<option value="4">4</option>
                	        			</select>
                	        		</div>
                        			<div class="passenger">
                						<label for="infant">Infant <sub>(<2 yrs)</sub></label>
                						<select name="infant" id="infant">
                	       	            	<option selected="selected" value="0">0</option>
                	                    	<option value="1">1</option>
                	                    	<option value="2">2</option>
                	                    	<option value="3">3</option>
                	                    	<option value="4">4</option>
                	        			</select>
                	        		</div>
                				</div>
                				<div class="cols clearfix">
                					<input type="submit" value="Search" class="button"> 
                				</div>
                            </form>
            			</div>
            			<div class="popular-flight">
            				<h3>Cheapest Flight Fare</h3>
            				<hr>
            				<div class="from clearfix"><label for="flight-pop-origin">From</label><select id="flight-pop-origin" class="large">	
    	    						<option value="CGK">Jakarta - CGK</option>
    	    						<option value="BPN">BalikPapan - BPN</option>
    	    						<option value="BTJ">Banda Aceh - BTJ</option>
    	    						<option value="BDO">Bandung - BDO</option>
    	    					</select>
        					</div>
    						<ul class="list-city">
    							<li><a title="Cheap Flights from Jakarta to Bali" href="#"><strong>Bali</strong> <span><em>From</em> <strong class="currency" rel="400000">IDR 400.000,00</strong></span></a></li>
    							<li><a title="Cheap Flights from Jakarta to Surabaya" href="#"><strong>Surabaya</strong> <span><em>From</em> <strong class="currency" rel="400000">IDR 400.000,00</strong></span></a></li>
    							<li><a title="Cheap Flights from Jakarta to Medan" href="#"><strong>Medan</strong> <span><em>From</em> <strong class="currency" rel="400000">IDR 400.000,00</strong></span></a></li>
    						</ul>
            			</div>
    	            </div>
    	            <div id="hotel" class="tabs-content clearfix">
            			<div class="search-hotel">
                            <h3>Find Hotels</h3>
                            <hr>
        					<div class="cols">
        						<label for="from">Location / Hotel</label>
        						<input type="text" id="location" name="location">
        					</div>
        					<div class="cols">
        						<label for="depart">Check In</label><br>
        						<input type="text" id="check-in" name="check-in" class="datepicker">
        					</div>
        					<div class="cols">
        						<label for="return">Check Out</label><br>
        						<input type="text" id="check-out" name="check-out" class="datepicker">
        					</div>
        					<div class="cols">
        						<div class="passenger">
        							<label for="room">Rooms</label>
        							<select name="room" id="room">
        				            	<option selected="selected" value="1">1</option>
        		                    	<option value="2">2</option>
        		                    	<option value="3">3</option>
        		                    	<option value="4">4</option>
        		        			</select>
        		        		</div>
        		        		<div class="passenger">
        							<label for="adult">Adult</label>
        							<select name="adult" id="adult">
        		       	            	<option selected="selected" value="0">0</option>
        		                    	<option value="1">1</option>
        		                    	<option value="2">2</option>
        		                    	<option value="3">3</option>
        		                    	<option value="4">4</option>
        		        			</select>
        		        		</div>
        	        			<div class="passenger">
        							<label for="children">Child <sub>(0-12)</sub></label>
        							<select name="children" id="children">
        		       	            	<option selected="selected" value="0">0</option>
        		                    	<option value="1">1</option>
        		                    	<option value="2">2</option>
        		                    	<option value="3">3</option>
        		                    	<option value="4">4</option>
        		        			</select>
        		        		</div>
        					</div>
        					<div class="cols clearfix">
        						<input type="submit" value="Search" class="button"> 
        					</div>
            			</div>
                        <div class="hotel-featured">
                        </div>
    	            </div>
                </div>
			</div>
		</section>
		<section class="sidebar-right grid_6">
			<div class="home-left">
        	</div>
        	<div class="ads-space">
				<a href="#"><img src="img/static/ads-denpasar.png" alt="Ads space"></a>
				<a href="#"><img src="img/static/ads-lombok.png" alt="Ads space"></a>
				<a href="#"><img src="img/static/ads-google.png" alt="Ads space"></a>
			</div>
		</section>
		<section class="main-content clearfix">
			<div class="promo-deals">
                <div class="promo-flight grid_8">
                    <a href="#"><h3>Garuda flights on sale this month!</h3>
                    <a href="#" class="pop-up-link">Share</a>
                    <div class="promo-content">
                        <a href="#" title=""><img src="" alt=""></a>
                        <a href="#">more...</a>
                    </div>
                </div>
                <div class="promo-hotel grid_8">
                    <a href="#"><h3>Destination of the moment: Bali</h3>
                    <a href="#" class="pop-up-link">Share</a>
                    <div class="promo-content">
                        <a href="#" title=""><img src="" alt=""></a>
                        <a href="#">more...</a>
                    </div>
                </div>
                <div class="holiday-package grid_8">
                    <a href="#"><h3>Book in a bundle! Save money</h3>
                    <a href="#" class="pop-up-link">Share</a>
                    <div class="promo-content">
                        <a href="#" title=""><img src="" alt=""></a>
                        <a href="#">more...</a>
                    </div>
                </div>
			</div>
			<div class="poi-content grid_24">
                <h2>Traveller Photos & Reviews</h2>
                <div><a class="prev nav" href="#">Previous</a></div>
                     <div class="poi-carousel">
                        <div class="poi-item">
                            <div class="province">Bali</div>
                            <a href="#" title="Tanjung Benoa">
                                <img src="" alt="Tanjung Benoa">
                                <h3>Tanjung Benoa</h3>
                            </a>
                        </div>
                        <div class="poi-item">
                            <div class="province">Jawa Tengah</div>
                            <a href="#" title="Candi Borobudur">
                                <img src="" alt="Candi Borobudur">
                                <h3>Candi Borobudur</h3>
                            </a>
                        </div>
                        <div class="poi-item">
                            <div class="province">Sumatera Utara</div>
                            <a href="#" title="Danau Toba">
                                <img src="" alt="Danau Toba">
                                <h3>Danau Toba</h3>
                            </a>
                        </div>
                        <div class="poi-item">
                            <div class="province">Bali</div>
                            <a href="#" title="Tanah Lot">
                                <img src="" alt="Tanah Lot">
                                <h3>Tanah Lot</h3>
                            </a>
                        </div>
                        <div class="poi-item">
                            <div class="province">Bali</div>
                            <a href="#" title="Pantai Kuta">
                                <img src="" alt="Pantai Kuta">
                                <h3>Pantai Kuta</h3>
                            </a>
                        </div>
                     </div>
                <div><a class="next nav" href="#">Next</a></div>
			</div>
		</section>
		<footer>
			<nav class="clearfix">
				<ul class="bottom-nav grid_24">
		          <li><a href="#">About Us</a></li>
		          <li><a href="#">FAQ</a></li>
		          <li><a href="#">Contact Us</a></li>
		          <li><a href="#">Jobs</a></li>
		          <li><a href="#">Our Partner</a></li>
		          <li><a href="#">Press</a></li>
		        </ul>
	        </nav>
	        <section class="footer">
	        	<div class="footer-wrapper clearfix">
		        	<div class="footer-left grid_12">
		        		<ul>
		        			<li><a href="#">Terms of service</a></li>
		        			<li><a href="#">Privacy</a></li>
		        			<li><a href="#">Feedback & support</a></li>
		        		</ul>
		        		<div class="copyright">
		        			&copy; 2013 Hi-Indonesia. All rights reserved.
		        		</div>
		        	</div>
		        	<div class="footer-right grid_12">
		        		<ul>
		        			<li><a href="#">English</a></li>
		        			<li><a href="#">Bahasa</a></li>
		        		</ul>
		        	</div>
	        	</div>
	        </section>
		</footer>
	</div>
</body>
</html>